<script lang="ts" setup name="StoreHouse">
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { deleteStoreHouseAPI } from '~/src/api/information'
import { Procure } from '~/src/api/interface/procure'
import { getStoreHouseAPI } from '~/src/api/procure'
import { useDeleteData } from '~/src/hooks/useHandleData'
import { formatDate } from '~/src/utils/date-formatter'
import StoreHouseDialog from './components/StoreHouseDialog.vue'
import { storeHouseColumns } from './info/columns'

const tableRef = ref<ProTableInstance>()
const initParam = reactive({ orderType: 1, date: [formatDate(-30, 'start', 'yyyy-MM-dd'), formatDate(0, 'start', 'yyyy-MM-dd')] })
const openDialog = (title: string, data?: any) => {
  storeHouseDialogRef.value?.putParams({ title, form: data, visible: true })
}

const storeHouseDialogRef = ref<InstanceType<typeof StoreHouseDialog>>()
const initData = reactive<Procure.StoreHouse>({
  id: 0,
  isDefault: false,
  name: '',
  code: '',
})

const onSubmit = async (e: Procure.StoreHouse) => {
  tableRef.value?.getTableList()
}

const onDelete = async () => {
  await useDeleteData(deleteStoreHouseAPI, tableRef.value as ProTableInstance)
}
</script>

<template>
  <div class="auto-height-container">
    <pro-table ref="tableRef" :columns="storeHouseColumns" :initParam="initParam" :isCard="false" :requestApi="getStoreHouseAPI">
      <template #tableHeader>
        <el-button v-auth="'add'" :icon="CirclePlus" type="primary" @click="openDialog('新增', initData)">新增仓库</el-button>
        <el-button :icon="Delete" type="primary" @click="onDelete">删除</el-button>
      </template>
      <template #code="{ row }">
        <el-button :icon="EditPen" link type="primary" @click="openDialog('编辑', row)">{{ row.code }}</el-button>
      </template>
      <template #name="scope">
        <el-text class="mr10">{{ scope.row.name }}</el-text>
        <el-tooltip v-if="scope.row.isDefault" placement="top">
          <template #content>
            业务未指定特定仓库时会指定默认仓
            <br />
            库，如菜品成本卡未配置扣减仓库
            <br />
            时，会自动指定为默认仓库。
          </template>
          <el-tag>默认</el-tag>
        </el-tooltip>
      </template>
    </pro-table>
    <store-house-dialog ref="storeHouseDialogRef" @on-confirm="onSubmit" />
  </div>
</template>

<style lang="scss" scoped></style>
